<template>
	<view class="content">
		<view class="score">
			<view class="r-li tn-flex tn-flex-col-center">
				<view class="label">技术水平</view>
				<view class="r-value">
					<tn-rate v-model="FormData.te_score" :count="count" activeColor="#AB74FF"></tn-rate>
				</view>
			</view>
			<view class="r-li r-li-mar tn-flex tn-flex-col-center">
				<view class="label">服务态度</view>
				<view class="r-value">
					<tn-rate v-model="FormData.ma_score" :count="count" activeColor="#AB74FF"></tn-rate>
				</view>
			</view>
			<view class="r-li tn-flex tn-flex-col-center">
				<view class="label">响应速度</view>
				<view class="r-value">
					<tn-rate v-model="FormData.res_score" :count="count" activeColor="#AB74FF"></tn-rate>
				</view>
			</view>
		</view>
		<view class="score textarea">
			<textarea placeholder="请输入你的评价" v-model="FormData.content" placeholder-class="p-class" /></textarea>
		</view>
		<view class="btn" @click="submit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				FormData:{
					play_order_id:'',
					te_score:5,
					ma_score:5,
					res_score:5,
					content:'',
					images:''
				}
			};
		},
		onLoad(option) {
			this.FormData.play_order_id = option.id
		},
		methods:{
			async submit(){
				try{
					if(this.FormData.content == '') return this.msg('请输入评价内容')
					let result = await this.$request({
						loading:1,
						method:'post',
						url:'/api/play_order/order_eva',
						data:{
							...this.FormData
						}
					})
					console.log(result)
					this.msg(result.data.msg)
					uni.$emit('updateMyOrder')
					setTimeout(() =>{
						uni.navigateBack({delta:1})
					},800)
				}catch(e){
					this.msg(e.data.msg)
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 24rpx 30rpx;
		.score {
			height: 200rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 24rpx;
			.r-li {
				.label {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					margin-right: 32rpx;
				}
			}

			.r-li-mar {
				margin: 16rpx 0;
			}


		}
		.textarea{
			margin-top: 24rpx;
			padding:24rpx;
			height: 376rpx;
			.p-class{
				font-size: 28rpx;
				font-weight: 400;
				color: #333333ad;
			}
			textarea{
				color: #333333;
			}
		}
		.btn{
			height: 88rpx;
			background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
			border-radius: 20rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			margin-top: 40rpx;
		}
	}
</style>
